<template>
    <require from="./em-blog-top-menu.css"></require>
    <div ref="topMenuRef"
        class="ui top fixed inverted blue menu em-blog-top-menu ${isSearchFocus ? 'search-focus' : ''}">
        <div click.delegate="toggleHandler()" class="item tms-toggle">
            <i class="large ${isHide ? 'indent' : 'outdent'} link icon"></i>
        </div>
        <div ui-dropdown-action class="ui dropdown item tms-links">
            <i class="large content icon"></i>
            <div class="menu">
                <div class="ui icon search input">
                    <i class="search icon"></i>
                    <input type="text" placeholder="过滤查找...">
                </div>
                <div class="header"><i class="linkify icon"></i> 系统外链 (${sysLinks.length}) <i if.bind="isSuper"
                        click.trigger="addChannelLinkHandler($event)" title="添加系统外链"
                        class="circular icon link plus"></i></div>
                <div class="scrolling menu">
                    <a repeat.for="item of sysLinks" href="${item.href}" data-value="${item.href}" target="_blank" class="item">
                        <div class="ui green empty circular label"></div>
                        ${item.title}
                    </a>
                </div>
            </div>
        </div>
        <div class="item tms-logo">
            <a href="#/"><img ref="logoRef" src="img/tms-x32.png"></a>
        </div>
        <a class="header item" href="#/blog">
            TMS博文
        </a>
        <div class="item tms-create">
            <!-- <a modaal="blog-create" href="#modaal-blog-write" title="博文创建 (w)" class="ui primary button">创建</a> -->
            <div class="ui buttons">
                <a modaal="blog-create" href="#modaal-blog-write" title="博文创建 (w)" class="ui primary button">创建</a>
                <div ui-dropdown-hover class="ui floating right top pointing dropdown icon primary button">
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div class="header"><i class="info circle icon"></i> 选择编辑器</div>
                        <a class="item" click.delegate="createHtmlHandler()">
                            <div class="ui blue empty circular label"></div> HTML
                        </a>
                        <a modaal="blog-create-html" href="#modaal-blog-write-html" class="item" style="display: none;">
                            <div class="ui blue empty circular label"></div> HTML
                        </a>
                        <a click.delegate="createHandler()" class="item">
                            <div class="ui blue empty circular label"></div> Markdown
                        </a>
                        <a class="item" click.delegate="createExcelHandler()">
                            <div class="ui blue empty circular label"></div> 电子表格
                        </a>
                        <a modaal="blog-create-excel" href="#modaal-blog-write-excel" class="item"
                            style="display: none;">
                            <div class="ui blue empty circular label"></div> 电子表格
                        </a>
                        <a class="item" click.delegate="createSheetHandler()">
                            <div class="ui blue empty circular label"></div> 电子表格（新）
                        </a>
                        <a modaal="blog-create-sheet" href="#modaal-blog-write-sheet" class="item"
                            style="display: none;">
                            <div class="ui blue empty circular label"></div> 电子表格（新）
                        </a>
                        <a class="item" click.delegate="createMindHandler()">
                            <div class="ui blue empty circular label"></div> 思维导图
                        </a>
                        <a modaal="blog-create-mind" href="#modaal-blog-write-mind" class="item" style="display: none;">
                            <div class="ui blue empty circular label"></div> 思维导图
                        </a>
                        <a if.bind="!!sysConf.drawUrl" class="item" target="_blank" href="${sysConf.drawUrl}">
                            <div class="ui blue empty circular label"></div> 图表工具
                        </a>
                        <div class="ui divider"></div>
                        <a click.delegate="selectTplHandler()" class="item">
                            <div class="ui blue empty circular label"></div> 基于模板
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div id="modaal-blog-write" style="display:none;">
            <em-blog-write></em-blog-write>
        </div>
        <div id="modaal-blog-write-html" style="display:none;">
            <em-blog-write-html></em-blog-write-html>
        </div>
        <div id="modaal-blog-write-mind" style="display:none;">
            <em-blog-write-mind></em-blog-write-mind>
        </div>
        <div id="modaal-blog-write-excel" style="display:none;">
            <em-blog-write-excel></em-blog-write-excel>
        </div>
        <div id="modaal-blog-write-sheet" style="display:none;">
            <em-blog-write-sheet></em-blog-write-sheet>
        </div>
        <div class="right menu">
            <a ref="tasksRef" class="item icon tms-task" click.delegate="tasksRefreshHandler()"><i
                    class="list large link icon"></i></a>
            <div class="ui fluid popup bottom left transition hidden"
                style="top: 554px; left: 1px; bottom: auto; right: auto; width: 761px;">
                <em-chat-todo lock.bind="!0" view-model.ref="todoVm"></em-chat-todo>
            </div>
            <a ref="newsRef" class="item icon tms-news" click.delegate="newsRefreshHandler()">
                <i class="announcement large link icon"></i>
                <div show.bind="totalNews > 0" class="floating ui red circular label" style="top: 0;">${totalNews > 99 ?
                    '99+' : totalNews }</div>
            </a>
            <div class="ui fluid popup basic bottom left transition hidden">
                <div class="ui selection divided list tms-sys-msgs">
                    <div class="item" show.bind="totalNews == 0">
                        <div class="ui big yellow message">暂无系统消息!</div>
                    </div>
                    <a class="item" repeat.for="item of news" click.delegate="newsHandler(item)"
                        href="${basePath + '#/blog/' + item.bid + (item.cid ? '?cid=' + item.cid : '')}">
                        <!-- <i class="check circle big outline icon" title="点击可忽略删除" click.delegate="newsDelHandler(item, $event)"></i> -->
                        <i class="remove circle outline large red icon" style="padding-left: 3px;" title="点击可忽略删除"
                            click.delegate="newsDelHandler(item, $event)"></i>
                        <i class="alarm outline large icon"></i>
                        <div class="content" style="width: 100%;">
                            <div class="header" style="font-weight: 400; font-size: 12px; margin-bottom: 6px;">
                                <span style="font-style: italic;"><i class="wait icon"></i><span
                                        title="更新时间：${item.createDate | date}">${item.createDate |
                                        timeago}</span></span>
                                <span style="float: right; margin-right: 8px;"><i class="user icon"></i><span
                                        title="更新人：${item.username | userName}">${item.username |
                                        userName}</span></span>
                            </div>
                            <div if.bind="item.cmd == 'At'" class="description">博文<b>${item.title}</b>有提及@到你，点击可查看！
                            </div>
                            <div if.bind="item.cmd == 'CAt'" class="description">博文<b>${item.title}</b>的评论有提及@到你，点击可查看！
                            </div>
                            <div if.bind="item.cmd == 'CC'" class="description">博文<b>${item.title}</b>有新的评论，点击可查看！</div>
                            <div if.bind="item.cmd == 'CU'" class="description">博文<b>${item.title}</b>有评论更新，点击可查看！</div>
                            <div if.bind="item.cmd == 'F'" class="description">您关注的博文<b>${item.title}</b>有更新，点击可查看！
                            </div>
                            <div if.bind="item.cmd == 'FCC'" class="description">您关注的博文<b>${item.title}</b>有新的评论，点击可查看！
                            </div>
                            <div if.bind="item.cmd == 'FCU'" class="description">您关注的博文<b>${item.title}</b>有评论更新，点击可查看！
                            </div>
                            <div if.bind="item.cmd == 'OU'" class="description">您的博文<b>${item.title}</b>有被他人更新，点击可查看！
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="item">
                <div ref="searchRef" class="ui category search"
                    title="全文检索或者指定前缀检索&#10;- 按标签检索（tag:标签）&#10;- 按发送人检索（from:super）">
                    <div class="ui icon input">
                        <input keyup.trigger="searchKeyupHandler($event)" blur.trigger="searchBlurHandler()"
                            focus.trigger="searchFocusHandler()" class="prompt" type="text" placeholder="搜索...">
                        <i class="search icon"></i>
                    </div>
                    <div class="results"></div>
                </div>
            </div>
            <div ui-dropdown-hover
                class="ui top right dropdown item tms-login-user ${isActiveSearch ? 'tms-hide' : ''}">
                <em-user-avatar user.bind="loginUser"></em-user-avatar>
                <div class="menu">
                    <!-- <div class="header">账户操作</div>
                    <div class="divider"></div> -->
                    <a class="item" target="_blank" href="https://gitee.com/xiweicheng/tms/issues"><i
                            class="add circle icon"></i>报告问题</a>
                    <a class="item" target="_blank" href="https://gitee.com/xiweicheng/tms/releases"><i
                            class="info circle icon"></i>发行版本</a>
                    <div class="divider"></div>
                    <a class="item" click.delegate="userEditHandler()"><i class="edit icon"></i>账户修改</a>
                    <a class="item" style="color: red!important;" click.delegate="logoutHandler()"><i
                            class="sign out icon red"></i>退出登录</a>
                </div>
            </div>
        </div>
    </div>
    <em-user-edit user.bind="loginUser" view-model.ref="userEditMd"></em-user-edit>
    <em-blog-tpl-select view-model.ref="blogTplSelectMd"></em-blog-tpl-select>
    <em-chat-system-link-mgr view-model.ref="sysLinkMgrVm"></em-chat-system-link-mgr>
</template>
